<!-- $Id: uiconfig.html,v 1.6 2010-01-02 09:45:14 gaudenz Exp $ Copyright (c) 2006-2010, JGraph Ltd UIConfig example for mxGraph. This example demonstrates using a config file to configure the toolbar and popup menu in mxEditor.-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
  <title>topo page</title><!-- Sets the basepath for the library if not in same directory -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">


  <!-- Loading Stylesheets -->

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">


  <style>
    html, body {
      font: 14px, arial, "微软雅黑";
      padding: 0;
      margin: 0;
      width: 100%;
      height: 100%;
    }

    #mynetwork {
      width: 100%;
      height: 100%;
    }

    .table {
      background: #fff;
      border: 1px solid #ccc;
    }

    .table td {
      border-left: 1px solid #ccc;
    }

    body, .site-holder {
      background: #fff;
      overflow:auto;
    }

  </style>

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
    <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <![endif]-->
</head>

<script type="text/javascript">
    mxBasePath = '../src';
</script>

<script type="text/javascript" src="../src/js/mxClient.js"></script>
<script type="text/javascript" src="../mxClient.js"></script>

<!-- Page passes the container for the graph to the grogram -->
<body onload=" draw(document.getElementById('graphContainer'));" style="width: 100%;height:100%;">
<div id="graphContainer" style="width: 100%;height:100%;cursor:default;position:absolute; ">
</div>
</div>

</body>

<!-- Example code -->
<script type="text/javascript">

    function GetRequest() {
        var url = location.search; //获取url中"?"符后的字串
        var theRequest = new Object();
        if (url.indexOf("?") != -1) {
            var str = url.substr(1);
            strs = str.split("&");
            for (var i = 0; i < strs.length; i++) {
                theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
            }
        }
        return theRequest;
    }


    function big(container){
        if (!mxClient.isBrowserSupported()) {
            // Displays an error message if the browser is not supported.
            mxUtils.error('Browser is not supported!', 200, false);
        } else {
            var industryId = GetRequest().industryId;
            var model = new mxGraphModel();
            var graph = new mxGraph(container, model);
            graph.zoomIn();
        }
    }

    // Program starts here. Creates a sample graph in the// DOM node with the specified ID. This function is invoked// from the onLoad event handler of the document (see below).
    function draw(container) {
        // Checks if the browser is supported
        if (!mxClient.isBrowserSupported()) {
            // Displays an error message if the browser is not supported.
            mxUtils.error('Browser is not supported!', 200, false);
        } else {
            var industryId = GetRequest().industryId;//传参产业Id
            var model = new mxGraphModel();
            var graph = new mxGraph(container, model);
            graph.setHtmlLabels(true); //文本换行操作
            graph.setEnabled(false); //graph不可拖拽
            // Overrides method to provide a cell label in the display
            graph.convertValueToString = function (cell) {
                if (mxUtils.isNode(cell.value)) {
                    if (cell.value.nodeName.toLowerCase() == 'object') {
                        var labelName = cell.getAttribute('label', '');
                        return labelName;
                    }
                } else {
                    return cell.value;
                }
            };

            var onload = function (reqXml) {
                if (reqXml.getStatus() == 200 || reqXml.getStatus() == 4) {
                    var chainXml = reqXml.getText();
                    if (chainXml === null || chainXml.indexOf('object') == -1) {
                      noticeHidden()
                    }
                  //  var chainXml = JSON.parse(result).chainXml;
                    if (chainXml == null || chainXml == '') {//弹出提示框 是否要加载
                        alert("该产业还没有绘制图谱，请联系管理员！");
                    } else {
                        graph.getModel().beginUpdate();
                        var node = mxUtils.parseXml(chainXml);
                        var dec = new mxCodec();
                        dec.decode(node.documentElement, graph.getModel());
                        graph.getModel().endUpdate();

                        var track = new mxCellTracker(graph);
                        track.mouseMove = function (sender, me) {
                            var cell = this.getCell(me);
                            if (cell) {
                                //设置鼠标为样式为手状
                                me.getState().setCursor('pointer');
                            }
                        };
                        // graph.zoomToCenter();    //居中现在和fit冲突，后续的图谱画法宽占80%以上
                        graph.fit();
                        graph.centerZoom = false;//不居中放大

                        graph.addListener(mxEvent.DOUBLE_CLICK, function (sender, evt) {
                            var cell = evt.getProperty('cell');
                            selectionChanged(graph, cell);
                        });
                    }
                } else {
                  noticeHidden()
                }

            };

            var onerror = function (reqXml) {
                mxLog.debug('error: ' + req.getStatus());
                noticeHidden()
            };

            var noticeHidden = function () {
              window.parent.postMessage({showChainTopo: false}, '*');
            }

            if (industryId != null) {
                var reqXml = new mxXmlRequest('/api/ccid-data/brainechainxml/detail?industryId='+industryId,null, 'GET',null);
                reqXml.send(onload, onerror);
            } else {
                alert("没有找到对应的产业，请确认参数！");
            }

        }
    }


    function selectionChanged(graph, cell) {
        var nodeId;
        if (cell != null) {
            if (mxUtils.isNode(cell.value) && cell.value.nodeName.toLowerCase() == 'object') {
                nodeId = cell.getAttribute('nodeId', '');
            }else{
                nodeId = cell.nodeId;
            }
            if (nodeId) {
                var type=GetRequest().industryId;
                window.parent.industryDetail(nodeId,type);
              //  var url = "http://dataexchange.picp.net/online/#/industry?type=" + nodeId + "&industryId=" + GetRequest().type;
              //  window.parent.location.href = url;
            }
        }
    }


</script>
</html>
